<template>
	<view>
		<view>
			<image src="@/static/imgs/raw.png" alt="" style="width: 100%;height: 560rpx;" />
			<view class="header">
				<view class="header-left">牛的编号</view>
				<view class="header-right">
					<view>偏瘦</view>
					<i class="iconfont icon-xiangyoujiantou"></i>
				</view>
			</view>
		</view>
		<view class="mune">设备信息</view>
		<view class="mune-item" v-for="(item, index) in item" :key="index">
			<view class="mune-item-left">{{item.title}}</view>
			<view class="mune-item-right">
				<view>{{item.Percentage}}</view>
				<image :src="item.img" alt="" style="width: 40rpx;height: 40rpx;" />
				<view>IMEI</view>
				<view>{{item.nuber}}</view>
			</view>
		</view>
		<view class="mune">牲畜信息</view>
		<view class="mune-list" v-for="(item,index) in mergedData" :key="index">
			<view class="mune-list-left">{{item.label}}</view>
			<view class="mune-list-right">{{item.value}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		cattleDetail
	} from '@/utils/api/Livestock.js'
	import dayjs from 'dayjs'
	const fId = ref('')
	const item = ref([])
	const mergedData = ref([])

	onLoad((options) => {
		fId.value = options.fId
	})

	onMounted(async () => {
		const res = await cattleDetail({
			id: fId.value
		})
		if (res.code === 200) {
			// 处理设备信息（耳标和项圈）
			const handleDeviceInfo = (data, type) => {
				data.forEach((device) => {
					item.value.push({
						title: type === 'necklace' ? '智能项圈' : '智能耳标',
						Percentage: device.F_Quantity + '%',
						img: type === 'necklace' ? '/static/imgs/dianliang.png' :
							'/static/imgs/eq_info.png',
						nuber: device.F_IMEI
					})
				})
			}
			if (res.data.necklace && res.data.necklace.length > 0) {
				handleDeviceInfo(res.data.necklace, 'necklace')
			}
			if (res.data.eartag && res.data.eartag.length > 0) {
				handleDeviceInfo(res.data.eartag, 'eartag')
			}

			// 处理牲畜信息
			const cowInfo = res.data.cowinfo[0]
			mergedData.value.push({
				label: '牲畜种类',
				value: cowInfo.type
			})
			mergedData.value.push({
				label: '品种',
				value: cowInfo.F_Type_Id
			})
			mergedData.value.push({
				label: '性别',
				value: cowInfo.F_Sex === 0 ? '母' : '公'
			})
			mergedData.value.push({
				label: '出生时间',
				value: formatTime(cowInfo.F_Birthday)
			})
			mergedData.value.push({
				label: '出生体重',
				value: cowInfo.F_Csweight + 'KG'
			})
			mergedData.value.push({
				label: '年龄',
				value: cowInfo.brithday
			})
			mergedData.value.push({
				label: '当前体重',
				value: cowInfo.F_Weight + 'KG'
			})
			mergedData.value.push({
				label: '当前状态',
				value: cowInfo.F_State === 0 ? '健康' : '异常'
			})
		}
	})
	
	//日期转换函数
	const formatTime = (time) => {
	    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
	}
</script>

<style scoped>
	@import '@/static/iconfont/iconfont.css';

	.header {
		width: 100%;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-left {
		font-size: 40rpx;
		margin-left: 40rpx;
	}

	.header-right {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
		color: chocolate;
	}

	.mune {
		width: 100%;
		height: 60rpx;
		background-color: #EFEFEF;
		line-height: 60rpx;
		padding: 0 40rpx;
	}

	.mune-item {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mune-item-left {
		margin-left: 40rpx;
	}

	.mune-item-right {
		width: 400rpx;
		margin-right: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.mune-list {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #e5e7eb;
	}

	.mune-list-left {
		margin-left: 40rpx;
	}

	.mune-list-right {
		width: 400rpx;
		margin-right: 40rpx;
		text-align: right;
	}
</style>